<template>
    <div>
        <div v-show="isShow">
            <rui-page :defines="defines">
                <rui-query :label-width="150"
                           ref="searchFormManage"
                           :query="queryData"
                           :query-rows="searchFormOptions"
                           :more-rows="moreRows"
                />
                <br/>
                <Row>
                    <Alert show-icon>
                        已选择 <span class="select-count">{{selectCount}}</span> 项
                        <a class="select-clear" @click="clearSelectAll">清空</a>
                    </Alert>
                </Row>
                <rui-table :defineId="'productManageTable'"
                           :fixedLeft="['action']"
                           :fixedRight="[]"
                           :showIndex="false"
                           :columns="manageColumns"
                           :slots="[{key:'action',slot:'action'},{key:'isEffective',slot:'isEffective'},{key:'templateName',slot:'templateName'}]"
                           @loadDatas="queryData"
                           @on-selection-change="changeSelect"
                           ref-query="searchFormManage"
                           ref="defineProductTable">
                    <template slot="toolBar">
                        <Button @click="add" type="primary" icon="md-add">新增</Button>
                        <Button @click="effective"  type="primary">有效</Button>
                        <Button @click="invalid"   type="primary" >无效</Button>
                        <circleLoading v-if="operationLoading"/>
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                        <Button style="margin-right:5px" type="primary" size="small" @click="edit(row)">编辑
                        </Button>
                        <Button type="primary" size="small" @click="view(row)">查看</Button>
                    </template>

                    <template slot-scope="{ row, index }" slot="isEffective">
                        <div>
                            <tag v-if="row.isEffective=='1'" color="success" size="default">有效</tag>
                            <tag v-if="row.isEffective=='0'" color="error" size="default">无效</tag>
                        </div>
                    </template>
                    <template slot-scope="{ row, index }" slot="templateName">
                        <a @click="view(row)">
                            {{row.templateName}}
                        </a>
                    </template>
                </rui-table>
                <Modal
                    v-model="templateModalVisible"
                    :title="modalTitle"
                    :width="1000"
                    :closable="false"
                    :mask-closable="false"
                >
                    <rui-form :form-options="formOptions"
                              :label-width="120"
                              :read-only="false"
                              ref="templateForm">
                    </rui-form>
                    <div slot="footer">
                        <Button size="small" @click="cancel">取消</Button>
                        <Button type="primary" size="small" @click="next">下一步</Button>
                    </div>
                </Modal>
            </rui-page>
        </div>
        <product-template :templateParms ='templateParms'  v-if="isShowTemplate" ref="productTemplate"   @next="parentReceive"></product-template>
    </div>
</template>
<script>

    import productManageDefine from "./defines/product-manage-define";
    import productManageTableDefine from "./defines/product-manage-table-define";

    import {
        getProductListData,
        effective,
        invalid
    } from "@/projects/afs-core-business/api/afs-product/product/product";

    import productTemplate from "./productTemplate.vue";
    import circleLoading from "_c/circle-loading/circle-loading.vue";
    export default {
        name: "product-manage",
        components: {
            productTemplate,
            circleLoading
        },
        data() {
            return {
                open: "productManageForm",
                isShow: true,
                isShowTemplate: false,
                operationLoading: false,
                selectList: [],
                dataList: [],
                datas: [],
                selectCount: 0,
                templateModalVisible: false,
                templateModal: false,
                modalTitle: null,
                templateParms:{},
                searchFormOptions: [
                    {defineId: 'productManage', span: 12, fields: ['templateNumber', 'templateName', 'isEffective']},

                ],
                moreRows: [  {defineId: 'productManage', span: 12, fields: ['templateCategory', 'versionNumber']}],
                manageColumns: [
                    'action', 'templateNumber', 'templateName', 'templateCategory', 'versionNumber', 'isEffective'
                ],
                formOptions: [
                    {
                        isGroup: false,
                        grids: [
                            {defineId: 'productManage', span: 8, fields: ['templateCategory']},
                        ]
                    }
                ]

            };
        },
        methods: {
            queryData(queryData) {
                console.log(queryData);
                getProductListData(queryData).then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data;
                        this.$refs.defineProductTable.updateTableData(records, total);
                    }
                });
            },
            refresh() {
                this.clearSelectAll();
                this.$refs['defineProductTable'].reloadData();
            },
            clearSelectAll() {
                this.$refs.defineProductTable.getTable().selectAll(false);
            },
            cancel() {
                this.templateModalVisible = false;
                this.$refs.templateForm.setFieldRequired('templateCategory', false);
            },
            add() {
                this.modalTitle = "选择模板";
                this.$refs.templateForm.setFieldRequired('templateCategory', true);
                let self = this;
                this.$nextTick(() => {
                    this.$refs.templateForm.resetFrom();
                    this.templateModalVisible = true;
                })
            },
            effective() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要设置有效的数据");
                    return;
                }
                if(this.check("effective")){return;}
                this.$Modal.confirm({
                    title: "确认设置有效吗",
                    content: "您确认要设置有效所选的 " + this.selectCount + " 条数据?",
                    onOk: () => {
                        let ids = [];
                        this.selectList.forEach(function (e) {
                            ids += e.id + ",";
                        });
                        ids = ids.substring(0, ids.length - 1);
                        this.operationLoading = true;
                        effective({ids: ids}).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("设置成功");
                                this.refresh();
                            }
                        }).catch(() => {
                            this.operationLoading = false;
                        });
                    }
                });
            },
            invalid() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要设置无效的数据");
                    return;
                }
                if(this.check("invalid")){return;}
                this.$Modal.confirm({
                    title: "确认设置无效吗",
                    content: "您确认要设置无效所选的 " + this.selectCount + " 条数据?",
                    onOk: () => {
                        let ids = [];
                        this.selectList.forEach((e) => {
                            ids += e.id + ",";
                        });
                        ids = ids.substring(0, ids.length - 1);
                        this.operationLoading = true;
                        invalid({ids: ids}).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("设置成功");
                                this.refresh();
                            }
                        }).catch(() => {
                            this.operationLoading = false;
                        });
                    }
                });
            },
            check(type){
                let invalidNum = 0;
                let effectiveNum = 0;
                this.selectList.forEach((e) => {
                    if(e.isEffective==0){//无效
                        invalidNum++;
                    }else if(e.isEffective==1){//有效
                        effectiveNum++;
                    }
                });
                var checkResult = false;
                if("invalid"==type&&invalidNum>0){
                    this.$Message.warning("不可设置无效数据为无效！");
                    checkResult = true;
                }
                if("effective"==type&&effectiveNum>0){
                    this.$Message.warning("不可设置有效数据为有效！");
                    checkResult = true;
                }
                return checkResult;
            },
            changeSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            next() {
                this.$refs.templateForm.getForm().validate((valid) => {
                    if (valid) {
                        console.log('校验表单通过 提交数据')
                        let {templateCategory} = this.$refs.templateForm.getFormData()
                        this.templateModalVisible = false;
                        this.isShowTemplate = true;
                        this.isShow = false;
                        this.templateParms={status:'1', templateCategory:templateCategory};
                    } else {
                        console.log('校验表单失败')
                    }
                })
            },
            edit(v) {
                this.isShowTemplate = true;
                this.isShow = false;
                this.templateParms={status:'2', templateCategory:v.templateCategory,id:v.id};
            },
            view(v) {
                this.isShowTemplate = true;
                this.isShow = false;
                this.templateParms={status:'3', templateCategory:v.templateCategory,id:v.id};
            },
            parentReceive() {
                this.isShowTemplate = false;
                this.isShow = true;
                this.refresh();
            },
        },
        computed: {
            defines() {
                return [
                    {
                        id: 'productManage',
                        fields: productManageDefine
                    },
                    {
                        id: 'productManageTable',
                        fields: productManageTableDefine
                    }
                ]
            }
        },
        mounted() {
            this.refresh();
        }
    };
</script>
